---
title: Menüpunkt
image: /images/user-guide/kanban-views/kanban.png
---

<Frame>
  <img src="/images/user-guide/kanban-views/kanban.png" alt="Header" />
</Frame>

Ein vielseitiger Menüpunkt, der in einem Menü oder einer Navigationsliste verwendet werden kann.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItem } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  const handleButtonClick = (event) => {
    console.log("Icon button clicked!", event);
  };

  return (
    <MenuItem
      LeftIcon={IconBell}
      accent="default"
      text="Menu item text"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={true}
      testId="menu-item-1"
      onClick={handleMenuItemClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props         | Typ             | Beschreibung                                                                                                                       |
| ------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| LeftIcon      | Icon-Komponente | Ein optionales linkes Symbol, das vor dem Text im Menüelement angezeigt wird.                                      |
| Akzent        | Zeichenkette    | Gibt die Akzentfarbe des Menüelements an. Optionen umfassen: `default`, `danger` und `placeholder` |
| text          | Zeichenkette    | Der Textinhalt des Menüelements                                                                                                    |
| Symbolknöpfe  | array           | Ein Array von Objekten, die zusätzliche Symbolschaltflächen darstellen, die mit dem Menüelement verknüpft sind                     |
| isTooltipOpen | boolesch        | Steuert die Sichtbarkeit des Tooltips, der mit dem Menüelement verknüpft ist                                                       |
| TestId        | Zeichenkette    | Das data-testid-Attribut für Testzwecke                                                                                            |
| onClick       | function        | Rückruffunktion, die ausgelöst wird, wenn das Menüelement angeklickt wird                                                          |
| Klassenname   | Zeichenkette    | Optionaler Name für zusätzliche Gestaltung                                                                                         |

</Tab>
</Tabs>

## Varianten

Die verschiedenen Varianten der Menükomponente umfassen Folgendes:

### Befehl

Ein befehlsartiger Menüpunkt innerhalb eines Menüs zur Anzeige von Tastaturkürzeln.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemCommand } from "twenty-ui/display";

export const MyComponent = () => {
  const handleCommandClick = () => {
    console.log("Command clicked!");
  };

  return (
    <MenuItemCommand
      LeftIcon={IconBell}
      text="First Option"
      firstHotKey="⌘"
      secondHotKey="1"
      isSelected={true}
      onClick={handleCommandClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props        | Typ             | Beschreibung                                                                                  |
| ------------ | --------------- | --------------------------------------------------------------------------------------------- |
| LeftIcon     | Icon-Komponente | Ein optionales linkes Symbol, das vor dem Text im Menüelement angezeigt wird. |
| text         | Zeichenkette    | Der Textinhalt des Menüelements                                                               |
| firstHotKey  | Zeichenkette    | Die erste Tastenkombination, die dem Befehl zugeordnet ist                                    |
| secondHotKey | Zeichenkette    | Die zweite Tastenkombination, die dem Befehl zugeordnet ist                                   |
| ausgewählt   | boolesch        | Gibt an, ob das Menüelement ausgewählt oder hervorgehoben ist                                 |
| beiKlick     | Funktion        | Rückruffunktion, die ausgelöst wird, wenn das Menüelement angeklickt wird                     |
| className    | Zeichenkette    | Optionaler Name für zusätzliche Stilierung                                                    |

</Tab>
</Tabs>

### Ziehen

Ein verschiebbares Menüelement, das in einem Menü oder einer Liste verwendet werden soll, bei denen Elemente gezogen werden können und zusätzliche Aktionen über Symbolschaltflächen durchgeführt werden können.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItemDraggable } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  return (
    <MenuItemDraggable
      LeftIcon={IconBell}
      accent="default"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={false}
      onClick={handleMenuItemClick}
      text="Menu item draggable"
      isDragDisabled={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props             | Typ             | Beschreibung                                                                                                   |
| ----------------- | --------------- | -------------------------------------------------------------------------------------------------------------- |
| LeftIcon          | Icon-Komponente | Ein optionales linkes Symbol, das vor dem Text im Menüelement angezeigt wird.                  |
| Akzent            | Zeichenkette    | Die Akzentfarbe des Menüelements. Es kann entweder sein `standard`, `platzhalter` und `gefahr` |
| Symbolknöpfe      | array           | Ein Array von Objekten, die zusätzliche Symbolschaltflächen darstellen, die mit dem Menüelement verknüpft sind |
| isTooltipOpen     | boolesch        | Steuert die Sichtbarkeit des Tooltips, der mit dem Menüelement verknüpft ist                                   |
| onClick           | function        | Callback-Funktion, die beim Klicken auf den Link ausgelöst wird                                                |
| text              | Zeichenkette    | Der Textinhalt des Menüelements                                                                                |
| ZiehenDeaktiviert | boolesch        | Gibt an, ob das Ziehen deaktiviert ist                                                                         |
| Klassenname       | Zeichenkette    | Optionaler Name für zusätzliche Stilierung                                                                     |

</Tab>
</Tabs>

### Mehrfachauswahl

Bietet eine Möglichkeit, eine Mehrfachauswahl-Funktionalität mit einem zugehörigen Kontrollkästchen zu implementieren.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemMultiSelect } from "twenty-ui/display";

export const MyComponent = () => {

  return (
    <MenuItemMultiSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props          | Typ             | Beschreibung                                                                                  |
| -------------- | --------------- | --------------------------------------------------------------------------------------------- |
| LeftIcon       | Icon-Komponente | Ein optionales linkes Symbol, das vor dem Text im Menüelement angezeigt wird. |
| text           | Zeichenkette    | Der Textinhalt des Menüelements                                                               |
| ausgewählt     | boolesch        | Gibt an, ob das Menüelement ausgewählt (aktiviert) ist.    |
| onSelectChange | Funktion        | Rückruffunktion, die ausgelöst wird, wenn der Kontrollkästchenstatus geändert wird            |
| Klassenname    | Zeichenkette    | Optionaler Name für zusätzliche Stilierung                                                    |

</Tab>
</Tabs>

### Mehrfachauswahl Avatar

Ein Mehrfachauswahl-Menüelement mit einem Avatar, einem Kontrollkästchen zur Auswahl und einem Textinhalt.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemMultiSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  return (
    <MenuItemMultiSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props          | Typ          | Beschreibung                                                                                                 |
| -------------- | ------------ | ------------------------------------------------------------------------------------------------------------ |
| Avatar         | `ReactNode`  | Der Avatar oder das Symbol, das auf der linken Seite des Menüelements angezeigt werden soll. |
| text           | Zeichenkette | Der Textinhalt des Menüelements                                                                              |
| ausgewählt     | boolesch     | Gibt an, ob das Menüelement ausgewählt (aktiviert) ist.                   |
| onSelectChange | function     | Rückruffunktion, die ausgelöst wird, wenn der Kontrollkästchenstatus geändert wird                           |
| Klassenname    | Zeichenkette | Optionaler Name für zusätzliche Stilierung                                                                   |

</Tab>
</Tabs>

### Navigieren

Ein Menüelement mit einem optionalen linken Symbol, Textinhalt und einem nach rechts zeigenden Chevron-Symbol.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemNavigate } from "twenty-ui/display";

export const MyComponent = () => {
  const handleNavigation = () => {
    console.log("Navigate to another page");
  };

  return (
    <MenuItemNavigate
      LeftIcon={IconBell}
      text="First Option"
      onClick={handleNavigation}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props       | Typ             | Beschreibung                                                                                  |
| ----------- | --------------- | --------------------------------------------------------------------------------------------- |
| LeftIcon    | Icon-Komponente | Ein optionales linkes Symbol, das vor dem Text im Menüelement angezeigt wird. |
| text        | Zeichenkette    | Der Textinhalt des Menüelements                                                               |
| beiKlick    | Funktion        | Rückruffunktion, die ausgelöst wird, wenn das Menüelement angeklickt wird.    |
| Klassenname | Zeichenkette    | Optionaler Name für zusätzliche Gestaltung                                                    |

</Tab>
</Tabs>

### Auswahl

Ein auswählbares Menüelement mit optionalem linken Inhalt (Symbol und Text) und einer Anzeige (Kontrollsymbol), die den ausgewählten Zustand anzeigt.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemSelect } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props       | Typ             | Beschreibung                                                                                  |
| ----------- | --------------- | --------------------------------------------------------------------------------------------- |
| LeftIcon    | Icon-Komponente | Ein optionales linkes Symbol, das vor dem Text im Menüelement angezeigt wird. |
| text        | Zeichenkette    | Der Textinhalt des Menüelements                                                               |
| ausgewählt  | boolesch        | Gibt an, ob das Menüelement ausgewählt (aktiviert) ist.    |
| deaktiviert | boolesch        | Gibt an, ob das Menüelement deaktiviert ist.                                  |
| hovered     | boolesch        | Gibt an, ob sich der Mauszeiger derzeit über dem Menüelement befindet.        |
| onClick     | function        | Rückruffunktion, die ausgelöst wird, wenn das Menüelement angeklickt wird.    |
| Klassenname | Zeichenkette    | Optionaler Name für zusätzliche Stilierung                                                    |

</Tab>
</Tabs>

### Avatar auswählen

A selectable menu item with an avatar, featuring optional left content (avatar and text) and an indicator (check icon) for the selected state.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      testId="menu-item-test"
      onClick={handleSelection}
      className
    />
  );
};

```

</Tab>
<Tab title="Props">

| Props       | Typ          | Beschreibung                                                                                                 |
| ----------- | ------------ | ------------------------------------------------------------------------------------------------------------ |
| Avatar      | `ReactNode`  | Der Avatar oder das Symbol, das auf der linken Seite des Menüelements angezeigt werden soll. |
| text        | Zeichenkette | Der Textinhalt des Menüelements                                                                              |
| ausgewählt  | boolesch     | Gibt an, ob das Menüelement ausgewählt (aktiviert) ist.                   |
| deaktiviert | boolesch     | Gibt an, ob das Menüelement deaktiviert ist.                                                 |
| hovered     | boolesch     | Gibt an, ob sich der Mauszeiger derzeit über dem Menüelement befindet.                       |
| TestId      | Zeichenkette | Das data-testid-Attribut für Testzwecke                                                                      |
| onClick     | Funktion     | Rückruffunktion, die ausgelöst wird, wenn das Menüelement angeklickt wird.                   |
| Klassenname | Zeichenkette | Optionaler Name für zusätzliche Stilierung                                                                   |

</Tab>
</Tabs>

### Farbe auswählen

Ein wählbares Menüelement mit Farbbeispiel für Situationen, in denen Benutzer eine Farbe aus einem Menü auswählen sollen.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectColor } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectColor
      color="green"
      selected={true}
      disabled={false}
      hovered={true}
      variant="default"
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props       | Typ          | Beschreibung                                                                                                                                                                                                              |
| ----------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| farbe       | Zeichenkette | Die Themenfarbe, die als Muster im Menüelement angezeigt wird. Optionen umfassen: `grün`, `türkis`, `himmel`, `blau`, `lila`, `rosa`, `rot`, `orange`, `gelb` und `grau`. |
| ausgewählt  | boolesch     | Gibt an, ob das Menüelement ausgewählt (aktiviert) ist.                                                                                                                                |
| deaktiviert | boolesch     | Gibt an, ob das Menüelement deaktiviert ist.                                                                                                                                                              |
| hovered     | boolesch     | Gibt an, ob sich der Mauszeiger derzeit über dem Menüelement befindet.                                                                                                                                    |
| Variante    | Zeichenkette | Die Variante des Farbmusters. It can either be `default` or `pipeline`                                                                                                                                    |
| onClick     | Funktion     | Rückruffunktion, die ausgelöst wird, wenn das Menüelement angeklickt wird.                                                                                                                                |
| Klassenname | Zeichenkette | Optionaler Name für zusätzliche Stilierung                                                                                                                                                                                |

</Tab>
</Tabs>

### Umschalten

Ein Menüelement mit einem zugehörigen Umschalter, mit dem Benutzer eine bestimmte Funktion aktivieren oder deaktivieren können.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from '@tabler/icons-react';

import { MenuItemToggle } from 'twenty-ui/display';

export const MyComponent = () => {

  return (
    <MenuItemToggle
      LeftIcon={IconBell}
      text="First Option"
      toggled={true}
      toggleSize="small"
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props          | Typ             | Beschreibung                                                                                       |
| -------------- | --------------- | -------------------------------------------------------------------------------------------------- |
| LeftIcon       | Icon-Komponente | Ein optionales linkes Symbol, das vor dem Text im Menüelement angezeigt wird.      |
| text           | Zeichenkette    | Der Textinhalt des Menüelements                                                                    |
| umgeschaltet   | boolesch        | Gibt an, ob der Umschalter im Zustand "ein" oder "aus" ist.                        |
| onToggleChange | function        | Rückruffunktion, die ausgelöst wird, wenn sich der Zustand des Umschalters ändert. |
| ToggleSize     | Zeichenkette    | Die Größe des Kippschalters. It can be either \                                   |
| Klassenname    | Zeichenkette    | Optionaler Name für zusätzliche Gestaltung                                                         |

</Tab>
</Tabs>
